<template>
  <div class='comment-body mt20'>
    <!-- 精彩评论 -->
    <div class='good-comment'>
      <h5 class='fs12' v-if='hotComments.length'>精彩评论</h5>
      <ul class='good-comment-ul mt20'>
        <li class='good-comment-li clearfix pb15 pt15' v-for='(item, i) in hotComments' :key=item.key>
          <!-- 用户头像 -->
          <div class="fl good-cmt-l">
            <img class='comment-user-avatar disinblock cursor-pointer' :src=item.user.avatarUrl :title="item.user.nickname">
          </div>
          <div class="fl good-cmt-r ml20">
            <!-- 评论内容 -->
            <div class="good-cmt-content">
              <a href="javascript:;" class="fs12 comment-user-name">{{ item.user.nickname }}</a>
              <span class="comment-content fs12" v-html='transferComment(item.content)'></span>
            </div>
            <!-- 回复框 -->
            <div class="reply-content mt10" v-show='item.beReplied.length' v-for="data in item.beReplied" :key=data.key>
              <a href="javascript:;" class="fs12 comment-user-name">{{ data.user.nickname }}</a>
              <span class="comment-content fs12" v-html='transferComment(data.content)'></span>
            </div>
            <!-- 评论时间 -->
            <div class="good-cmt-btm clearfix mt30">
              <span class="cmt-time fl fs12">{{ item.time | formatTime(item.time,true) }} </span>
              <div class="fr">
                <a href="javascript:;" class='mr10 fs12'>
                  <i class='like-icon disinblock'></i>
                  ( {{ item.likedCount }} )
                </a>
                <a href="javascript:;" class='fs12' @click='replyHotComments(i, !item.isReply)'>回复</a>
              </div>
            </div>
            <!-- 点击回复按钮的框 -->
            <div class="reply-content mt10" v-show='item.isReply'>
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="commentInput"
                maxlength="129"
                show-word-limit
                ref="hotCommentInput"
              >
              </el-input>
              <div class="mt10 ml5 posi-rel">
                <!-- 表情按钮 -->
                <emoji @commentEmoji='commentEmoji'></emoji>
                <!-- @ -->
                <span class="alt disinblock cursor-pointer"></span>
                <!-- 评论按钮 -->
                <el-button type="primary" round size="mini" class='fr comment-btn' @click='submitComment(item.commentId, i, 0)'>回复</el-button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 最新评论 -->
    <div class='new-comment'>
      <h5 class='fs12'>最新评论({{ newComments.length }})</h5>
      <ul class='good-comment-ul mt20'>
        <li class='good-comment-li clearfix pb15 pt15' v-for='(item, i) in newComments' :key=item.key>
          <!-- 用户头像 -->
          <div class="fl good-cmt-l">
            <img class='comment-user-avatar disinblock cursor-pointer' :src=item.user.avatarUrl :title="item.user.nickname">
          </div>
          <!-- 评论内容 -->
          <div class="fl good-cmt-r ml20">
            <div class="good-cmt-content">
              <a href="javascript:;" class="fs12 comment-user-name">{{ item.user.nickname }}</a>
              <span class="comment-content fs12" v-html='transferComment(item.content)'></span>
            </div>
            <!-- 回复框 -->
            <div class="reply-content mt10" v-show='item.beReplied.length' v-for="data in item.beReplied" :key=data.key>
              <a href="javascript:;" class="fs12 comment-user-name">{{ data.user.nickname }}</a>
              <span class="comment-content fs12" v-html='transferComment(data.content)'></span>
            </div>
            <!-- 评论时间 -->
            <div class="good-cmt-btm clearfix mt30">
              <span class="cmt-time fl fs12">{{ item.time | formatTime(1,true) }} </span>
              <div class="fr">
                <a href="javascript:;" class='mr10 fs12'>
                  <i class='like-icon disinblock'></i>
                  ( {{ item.likedCount }} )
                </a>
                <a href="javascript:;" class='fs12 comment-btn' @click='replyNewComments(i, !item.isReply)'>回复</a>
              </div>
            </div>
            <!-- 点击回复按钮的框 -->
            <div class="reply-content mt10" v-show='item.isReply'>
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="commentInput"
                maxlength="129"
                show-word-limit
                ref="newCommentInput"
              >
              </el-input>
              <div class="mt10 ml5 posi-rel">
                <!-- 表情按钮 -->
                <emoji @commentEmoji='commentEmoji'></emoji>
                <!-- @ -->
                <span class="alt disinblock cursor-pointer"></span>
                <!-- 评论按钮 -->
                <el-button type="primary" round size="mini" class='fr comment-btn' @click='submitComment(item.commentId, i, 1)'>回复</el-button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <login-dialog :dialog-visible='dialogVisible' @toogle='toogleDialog'></login-dialog>
  </div>
</template>

<script>
import loginDialog from '../../../headerMain/loginDialog'
import emoji from '../../../../components/emoji/emoji'
import { mapGetters } from 'vuex'
export default {
  name: "commentBody",
  props: ['playList', 'comment'],
  data() {
    return {
      playListData: '',
      commentData: '', // 所有评论数据
      hotComments: [], // 精彩评论
      newComments: [], // 最新评论
      dialogVisible: false, // 登录弹框显隐
      commentInput: '', // 回复别人的评论框内容
      emojiData: '',
      showReplyContentFlag: false, // 回复别人的评论框显隐flag
      token: null
    }
  },
  watch: {
    playList() {
      this.playListData = this.playList
    },
    comment() {
      // console.log('更新',this.comment)
      this.commentData = this.comment
    },
    commentData() {
      this.hotComments = this.commentData.hotComments
      this.newComments = this.commentData.comments
      this.$forceUpdate()
    },
    emojiData() {
      this.commentInput = this.emojiData
    },
    commentInput() {
      this.emojiData = this.commentInput
    }
  },
  mounted() {
    this.token = localStorage.getItem('token')
  },
  methods: {
    commentEmoji(text) {
      this.emojiData += text
    },
    async submitComment(commentId, rowIndex, flag) {
      // flag: 0 精彩评论  1——最新评论
      let param = {
        t: 2, // 2——回复
        type: 2, // 2: 歌单
        id: this.playList.id,
        content: this.commentInput,
        commentId: commentId,
      }
      try {
        let res = await this.$api.comment(param)
        if (res.data.code == 200) {
          this.textarea = ''
          this.$message({
            message: '评论成功!',
            type: 'success'
          });
          if (flag == 0) {
            this.hotComments[rowIndex].isReply = false // 回复评论成功，就隐藏回复评论框
          } else if (flag == 1) {
            this.newComments[rowIndex].isReply = false
          }
          let param1 = {
            id: this.playListData.id,
            timestamp: new Date().valueOf()
          }
          let res1 = await this.$api.getPlaylistComment(param1)
          this.commentData = res1.data
          console.log(res1)
          this.$forceUpdate()
        }
      } catch(err) {
        console.log(err)
      }
    },
    replyHotComments(rowIndex, flag) {
      if (this.ifShowLoginDialog()) {
        return
      }
      this.hotComments[rowIndex].isReply = flag
      if (flag) {
        this.hotComments.map((item, i) => {
          if (i !== parseInt(rowIndex, 10)) {
            item.isReply = false
          }
        })
      }
      this.commentInput = `@${this.hotComments[rowIndex].user.nickname}: `
      this.$forceUpdate()
      this.$refs.hotCommentInput[rowIndex].focus()
    },
    replyNewComments(rowIndex, flag) {
      if (this.ifShowLoginDialog()) {
        return
      }
      this.newComments[rowIndex].isReply = flag
      if (flag) {
        this.newComments.map((item, i) => {
          if (i !== parseInt(rowIndex, 10)) {
            item.isReply = false
          }
        })
      }
      this.commentInput = `@${this.newComments[rowIndex].user.nickname}: `
      this.$forceUpdate()
      this.$refs.newCommentInput[rowIndex].focus()
    },
    ifShowLoginDialog() {
      if (this.token) {
        this.dialogVisible = true
      } else {
        this.dialogVisible = false
      }
      return this.dialogVisible
    },
    toogleDialog(showFlag) {
      this.dialogVisible = showFlag
    }
  },
  components: {
    loginDialog,
    emoji,
  },computed: {
    ...mapGetters([
      'userid',
      'avatar',
    ])
  },
}
</script>

<style lang='less'>
  .comment-body {
    height: auto;
    .good-comment-li {
      border-top: 1px solid #e1e1e1;
    }
    .comment-user-avatar {
      width: 50px;
      height: 50px;
    }
    .comment-user-name {
      color: #0c73c2;
    }
    .reply-content {
      line-height: 20px;
      padding: 8px 19px;
      background-color: #f4f4f4;
      border: 1px solid #dedede;
    }
    .good-cmt-r {
      width: calc(100% - 70px);
    }
    .like-icon {
      width: 15px;
      height: 14px;
      background: url('../../../../assets/icon2.png');
      background-position: -150px 0px;
      vertical-align: -2px;
    }
    .cmt-time {
      color: #999;
    }
  }
  .emoji-icon {
    width: 18px;
    height: 18px;
  }
  /deep/.el-button.comment-btn {
    color: #FFF;
    background-color: #226bb5;
    border-color: #226bb5;
  }
  .alt {
    width: 18px;
    height: 18px;
    background: url('../../../../assets/icon.png');
  }
  .alt {
    background-position: 25px -490px;
  }
</style>